<template>
  <el-container>
    <!-- 标题 -->
    <el-header>
      <h1>登录</h1>
    </el-header>
    <el-main>
      <el-form class="useForm" ref="ruleFormRef" label-width="auto" :model="form" :rules="loginRules">
        <el-form-item prop="email" label="请输入邮箱">
          <el-input v-model="form.email" placeholder="邮箱"/>
        </el-form-item>
        <el-form-item prop="password" label="请输入密码">
          <el-input v-model="form.password" placeholder="密码" clearable/>
        </el-form-item>
        <!-- <button>提交</button> -->
        <!-- size="medium" @click="logItem" -->
        <el-button type="primary" @click="logItem">提交并登录</el-button>
      </el-form>
    </el-main>
    <el-footer>
      <h5>
        没有账户？
        <router-link to="/LoginAndRegistration/registration">点击免费注册</router-link>
      </h5>
    </el-footer>
  </el-container>
</template>

<script setup>
import frameStyle from './frameStyle'
import {userDefineStore} from '@/uitlsJs/Pinia/stores/user'
import {onBeforeMount, ref} from 'vue';
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'
//定义发射
const emit = defineEmits(['frameSize']);

//路由判断设置样式
onBeforeMount(() => {
  emit("frameSize", frameStyle.login)
});

//用户数据绑定
const userStore = userDefineStore()

//登录发送验证跳转
function logItem() {
  //获取表单数据
  let {email, password} = form.value
  //校验表单
  ruleFormRef.value.validate(volid => {
    if (volid) {
      //发送请求
      let user = userStore.getUserInfo(email, password)
      //获取用户信息
      user.then(e => {
        ElMessage("登录成功")
        router.push({path: "/manage"});
      })
    }
  })
}

//表单引用
const ruleFormRef = ref(null);

//表单绑定
const form = ref({
  password: '',
  email: ''
})

//校验数据
const loginRules = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur'},
  ],
  password: [
    {required: true, message: "密码不能为空", trigger: 'blur'},
    {min: 6, max: 16, message: "密码长度不对", trigger: 'blur'}
  ]
}
</script>

<style src="./loginIsEnroll.css" scoped></style>
